<template>
  <div class="searchBox">
    <van-search
      class="search"
      v-model="searchVal"
      show-action
      :label="label"
      :placeholder="placeholder"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const emits = defineEmits(['searchEvent']);
const props = defineProps({
  clearable: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    default: '',
  },
  leftIcon: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  userName: {
    type: String,
    default: '',
  },
  depName: {
    type: String,
    default: '',
  },
});
const searchVal = ref('');
function onSearch() {
  emits('searchEvent', searchVal.value);
}
</script>

<style scoped lang="scss">
.searchBox {
  padding: 0 3px;
  .search {
    width: 100%;
    padding: 10px 0;
  }

  ::v-deep .van-search__content {
    border-radius: 20px;
  }
}
</style>
